<template>
	<div class="back-btn" @click='handleBack'
		:style="{width:`${clientRect.height}px`, height:`${clientRect.height}px`, top: `${clientRect.top}px`, left:`${clientRect.left}px`}">
		<image mode="widthFix" class="img" src="/static/img/view/back.png"></image>
	</div>
</template>

<script>
	import {
		height,
		top,
		left,
	} from '@/scripts/compatible/clientRect.js'
	import {
		navigateBack
	} from '@/scripts/compatible/pageOptions.js'
	export default {
		data() {
			return {
				clientRect: {},
			}
		},
		mounted() {
			this.clientRect_init()
		},
		methods: {
			handleBack() {
				navigateBack()
			},
			clientRect_init() {
				this.clientRect = {
					height,
					top,
					left,
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.back-btn {
		position: fixed;
		left: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .4);
		z-index: 8;

		.img {
			width: 16px;
			display: block;
		}
	}
</style>